<template>
  <a-card :bordered="false" 
    class="overdue-card"
    :style="overdueCardStyle">
    <a-row align="start" :gutter="[0,7]">
      <a-col :span="24">
        <div class="card-sub-title">{{ subTitle }}</div>
      </a-col>
      <a-col :span="24">
        <div class="card-title">{{ title }}</div>
      </a-col>  
    </a-row>
  </a-card>
</template>

<script setup lang="ts">
import { ref , reactive, computed } from 'vue'
import blue from '@/assets/images/overdue-blue.svg?url'
import gray from '@/assets/images/overdue-gray.svg?url'
import pink from '@/assets/images/overdue-pink.svg?url'
import blueBlack from '@/assets/images/overdue-blue-black.svg?url'

let props = defineProps({
    type: {
      type: String,
      default: ()=> 'blue'
    },
    subTitle:{
      type: String,
      default: ()=> ''
    },
    title:{
      type: String,
      default: ()=> ''
    },
})


const overdueCardStyle = computed(()=>{

  let cardBg = ()=>{
    switch(props.type){
      case 'blue': return `url(${blue}) bottom right no-repeat,linear-gradient( 180deg, #E9F8FF 0%, #F6FBFF 100%)`;
      case 'gray': return `url(${gray}) bottom right no-repeat,linear-gradient( 180deg, #ECEFF4 0%, #F7F8FA 100%)`;
      case 'pink': return `url(${pink}) bottom right no-repeat,linear-gradient( 180deg, #F3F0FF 0%, #FBFAFF 100%)`;
      case 'blueBlack': return `url(${blueBlack}) bottom right no-repeat,linear-gradient( 180deg, #E9F0FF 0%, #F7F9FF 100%)`;
    }
  }

  return {
    background: `${cardBg()}`,
    backgroundSize: 'cover',
    backgroundRepeat: 'no-repeat',
  }
})

</script>

<style scoped lang='less'>
 .overdue-card{
  padding: 9px 28px;
  border-radius: 10px 10px 10px 10px;
 }

 .card-content{
  
 }

 .card-sub-title{
  font-weight: 400;
  font-size: 16px;
  color: #333333;
 }

 .card-title{
  margin-top: 10px;
  font-weight: 600;
  font-size: 32px;
  color: #333333;
 }

</style>